<template>
  <view class="step_three">
    <uni-section title="合同附件" type="line" padding>
      <view v-if="imageValue.length > 0">
        <encapsulation-preview :fileUrl="imageValue"></encapsulation-preview>
      </view>
      <view class="example-body" v-else>
        <uni-file-picker limit="1" ref="imageValue" file-mediatype="all"
          @select="select($event, 'imageValue')"></uni-file-picker>
      </view>
    </uni-section>

    <view class="step_three-btn">
      <view class="flexwork" @click="back">
        上一步
      </view>
      <!-- <view class="flexwork" @click="next">
        提交
      </view> -->
    </view>
    <web-view v-if="showAn" :src="pdfFileUrls"></web-view>

    <toast></toast>
  </view>
</template>

<script>
import EncapsulationPreview from '../../agency/components/EncapsulationPreview.vue';
import { mapState } from 'vuex'
import UploadImg from '../../../components/upload/upload-img.vue';
import { baseApiUrl, baseImgUrl } from '@/config.js';
export default {
  components: { UploadImg, EncapsulationPreview },
  data() {
    return {
      showAn: false, // 打开pdf文件
      pdfFileUrls: null, // pdf文件路径
      imageValue: [],
      fileUrls: '', // 保存图片路径
      listSelected1: [],
      baseApiUrl: baseApiUrl,
      baseImgUrl: baseImgUrl,
      imgPath: '/common/upload',
    }
  },
  mounted() {
    console.log(this.task.threeObj)
    if (this.task.threeObj != null) {
      this.imageValue = this.task.threeObj
    }
  },
  computed: {
    ...mapState(['task']),
  },
  methods: {
    select(e, key) {
      if (e.tempFiles.length > 0) {
        let size = e.tempFiles[0].size
        if (size <= 1024 * 1024 * 20) {
          uni.uploadFile({
            url: baseApiUrl + this.imgPath, //仅为示例，非真实的接口地址
            filePath: e.tempFilePaths[0],
            name: 'file',
            formData: {
              'user': 'test'
            },
            success: (uploadFileRes) => {
              let dist = JSON.parse(uploadFileRes.data)
              if (dist.code == 200) {
              } else {
                uni.showToast({
                  title: '上传失败',
                  icon: "none",
                  duration: 2000
                })
              }
            }
          });
        } else {
          this.$refs.imageValues[0].clearFiles()
          uni.showToast({
            title: '文件过大',
            icon: "none",
            duration: 2000
          })
        }
      } else {

      }

    },
    // 获取上传进度
    progress(e) {
      console.log("上传进度：", e);
    },

    // 上传成功
    success(e) {
      console.log("上传成功");
    },

    // 上传失败
    fail(e) {
      console.log("上传失败：", e);
    },
    // 上传成功回调函数
    test(e) {
      this.fileUrls = e.join(',')
    },
    back() {
      this.$emit('changeNext', 1)
    },
    next(key) {
      let _this = this;
      let data = {
        projectId: _this.task.firstObj.projectId, // 项目id
        serviceType: _this.task.firstObj.serviceType, // 服务类型
        name: _this.task.firstObj.name, // 项目名称
        projectHead: _this.task.firstObj.projectHead, // 项目负责人
        area: _this.task.firstObj.area, // 所属区域
        address: _this.task.firstObj.address, // 项目详情地址
        technologyHead: _this.task.firstObj.technologyHead, // 技术负责人
        staffIdList: _this.task.firstObj.staffIdList, // 执业人员
        entrustUnit: _this.task.firstObj.entrustUnit, // 委托单位
        entrustUnitPhone: _this.task.firstObj.entrustUnitPhone, // 委托单位联系电话
        entrustContact: _this.task.firstObj.entrustContact, // 委托单位联系人
        entrustContactPhone: _this.task.firstObj.entrustContactPhone, // 委托单位联系人电话
        areaCovered: _this.task.firstObj.areaCovered, // 占地面积(m2)
        no: _this.task.firstObj.no, // 合同编号
        signDate: _this.task.firstObj.signDate, // 合同签订日期
        startDate: _this.task.firstObj.startDate, // 合同起始日期
        endDate: _this.task.firstObj.endDate, // 合同结束日期
        entrustUnitPhone: _this.task.firstObj.entrustUnitPhone, // 委托单位联系电话
        fileUrls: _this.imageValue[0], // 合同附件
        projectServeList: _this.task.twoObj, // 服务对象列表
        state: key, // 状态：草稿还是新增
      }
      if (data.projectId) {
        this.$store.dispatch('updateTaskInfoApi', data).then(res => {
          let that = this
          if (res.code == 200) {
            uni.navigateBack({
              delta: 1,
              success() {
                that.$store.commit('storeFirst', null)
                that.$store.commit('stroeTwo', null)
                that.$store.commit('stroeThree', null)
              }
            })
          } else {
            this.$showToast({
              show: true,
              text: res.msg
            });
          }
        })
      } else {
        this.$store.dispatch('addTaskInfo', data).then(res => {
          let that = this
          if (res.code == 200) {
            uni.navigateBack({
              delta: 1,
              success() {
                that.$store.commit('storeFirst', null)
                that.$store.commit('stroeTwo', null)
                that.$store.commit('stroeThree', null)
              }
            })
          } else {
            this.$showToast({
              show: true,
              text: res.msg
            });
          }
        })
      }
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.step_three {
  background: #f4f5f5;

  &-preservation {
    width: 100%;
    text-align: center;

    .btn {
      width: 702rpx;
      height: 80rpx;
      line-height: 80rpx;
      background-color: #fff;
      border-radius: 5rpx;
      margin: 400rpx auto 0;
      font-size: 30rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #335ac6;
    }

    .text {
      font-size: 20rpx;
      font-family: Source Han Sans CN;
      font-weight: 300;
      color: #ec2227;
      margin-top: 24rpx;
    }
  }

  &-btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    z-index: 99;
    display: flex;
    flex-direction: row;
    border-top: 1rpx solid #e5e5e5;

    .flexwork {
      flex: 1;
      text-align: center;
      font-size: 30rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
    }

    .flexwork:first-child {
      background: $OVERALL_CLOSE_BUTTON_COLOR;
      color: $OVERALL_SITUATION_BACKGROUND;
    }

    // .flexwork:last-child {
    //   background: #15aaff;
    //   color: #ffffff;
    // }
  }
}
</style>
